<template>
  <div class="view-fill">
    <div v-if="!showModify.visible" class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        :title="title"
        :btn-list="btnList"
        :needOperateAffair="false"
        :operateAffairData="affairTableInfo"
        @returnBack="returnBack"
      >
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <basic-information
              :info="formInfo"
            />
          </div>
        </div>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>挂网信息</p>
          </div>
          <div class="model-panel-body">
            <basic-information :info="spreadInfoList">
              <template v-slot:basic-networkUnitCoefficient>
                <span>
                  {{ spreadInfoList.data.systemUnitCoefficient || '-' }}
                  {{ spreadInfoList.data.unitName }}
                </span>
                =
                <span>
                  {{ spreadInfoList.data.networkUnitCoefficient || '-' }}
                  {{ spreadInfoList.data.networkUnit }}
                </span>
              </template>
            </basic-information>
          </div>
        </div>
        <div class="model-panel">
          <!--<div class="model-panel-title">
            <p>供应商</p>
          </div>-->
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane
                  class="model-panel-title"
                  label="供应商"
                  name="supplier"
                >
                  <el-form
                    :model="tableInfo"
                    ref="tableForm"
                    style="width: 100%"
                  >
                    <PageTable
                      v-model:data="tableInfo.data"
                      :pager="false"
                      :check-box="false"
                      :tabIndex="true"
                      :field-list="tableInfo.fieldList"
                      :handle="tableInfo.handle"
                    >
                      <template v-slot:col-supplierName="scope">
                        <p class="slip-edit" @click="showSupplier(scope.row)">
                          {{ scope.row.supplierName || '-' }}
                        </p>
                      </template>
                      <template v-slot:col-orderNo="scope">
                        <p
                          v-if="
                            scope.row.contractList &&
                            scope.row.contractList.length
                          "
                        >
                          <span
                            class="slip-edit"
                            style="display: block"
                            v-for="item in scope.row.contractList"
                            @click="showOrder(item)"
                            :key="item.orderNo"
                          >
                            {{ item.orderNo }}
                          </span>
                        </p>
                        <span v-else>-</span>
                      </template>
                    </PageTable>
                  </el-form>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
      </NewFullScreen>
    </div>
    <!-- 新增或修改 -->
    <accessories-archives-modify
      v-if="showModify.visible"
      :id="props.id"
      v-model="showModify.visible"
      :title="showModify.title"
      :type="showModify.type"
      @returnModify="modifyCallback"
    />
  </div>
</template>

<script setup name="productDrugDetails">
import utils from '@/common/js/utils' // 公共方法

import BasicInformation from '@/components/BasicInformation/index'
import AccessoriesArchivesModify from './modify'
import { getDrugById, getSupplierProductAll } from '@/api/core'
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: '',
  },
})
const activeName = ref('supplier')
const filterInfo = ref({
  query: {
    productId: props.id,
    sort: 'is_default desc,create_time desc',
  },
  list: [],
})
// 表格相关
const tableInfo = ref({
  data: [],
  fieldList: [
    { label: '供应商', value: 'supplierName', type: 'slot' },
    { label: '机构代码', value: 'supplierCode' },
    { label: '合同编码', value: 'orderNo', type: 'slot' },

    { label: '联系人', value: 'contact' },
    { label: '联系电话', value: 'contactNumber' },
    { label: '是否默认', value: 'isDefaultValue' },
    { label: '价格', value: 'price', formatter: proxy.$fn.TripartiteMethod },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '80',
    btList: [
      {
        label: '设为默认',
        event: setDefault,
        show: true,
        ifRender: function (row) {
          return row.isDefault !== 1
        },
      },
    ],
  },
})
const title = ref('药品管理详情')
const formInfo = ref({
  data: {},
  fieldList: [
    {
      label: '药品名称',
      value: 'commonName',
      type: 'text',
    },
    { label: '药品编码', value: 'code', type: 'text' },
    {
      label: '状态',
      value: 'statusValue',
      type: 'text',
    },
    {
      label: '规格',
      value: 'standard',
      type: 'text',
    },
    { label: '计量单位', value: 'unitName', type: 'text' },
    { label: '上架状态', value: 'putShelfStatusValue' },
    // {
    //   label: '品牌',
    //   value: 'trademark',
    //   type: 'text',
    // },
    {
      label: '备注',
      value: 'remark',
      type: 'text',
    },
  ],
  labelWidth: '120px',
})
const spreadInfoList = ref({
  data: {},
  fieldList: [
    {
      label: '是否挂网',
      value: 'isSunPurchaseValue',
      type: 'text',
    },
    { label: '挂网类型', value: 'networkTypeValue', type: 'text' },
    { label: '挂网产品类型', value: 'networkProductTypeValue', type: 'text' },
    { label: '商品代码', value: 'serialNum', type: 'text' },
    { label: '挂网药品产品id', value: 'procureCatalogId', type: 'text' },
    { label: '挂网单位', value: 'networkUnit', type: 'text' },
    { label: '单位比例', value: 'networkUnitCoefficient', type: 'slot' },
    { label: '挂网单价', value: 'networkPrice', type: 'text' },
  ],
  labelWidth: '120px',
})
// 操作流水
const affairTableInfo = ref({
  query: {
    orderType: 49,
    orderId: props.id,
    sort: 'operate_time desc',
  },
})
const btnList = ref([
  {
    label: '修改',
    event: update,
    show: proxy.$permission('azDrug:update'),
  },
])
const showModify = ref({
  title: '修改药品',
  type: 'update',
  visible: false,
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    // 更新父组件visible
    emits('update:visible', val)
  },
})

onMounted(() => {
  getDeatil()
  getList()
})
function showSupplier(row) {
  proxy.$router.push({
    name: 'supplier',
    params: {
      supplierId: row.supplierId,
    },
  })
}
// 获取列表
function getList() {
  getSupplierProductAll(filterInfo.value.query).then((res) => {
    if (res && res.success) {
      tableInfo.value.data = res.data
    }
  })
}
function setDefault(row) {
  setSupplierProductDefault(row.id).then((resp) => {
    if (resp && resp.success) {
      getList()
    }
  })
}
const returnBack = () => {
  emits('returnBack')
}
const getDeatil = () => {
  getDrugById(props.id).then((resp) => {
    if (resp && resp.success) {
      formInfo.value.data = resp.data
      spreadInfoList.value.data = resp.data
    }
  })
}

function update() {
  showModify.value.visible = true
}
const modifyCallback = () => {
  showModify.value.visible = false
  getDeatil()
  getList()
}
</script>

<style scoped>
.inputRefScanHidden {
  position: absolute;
  color: transparent;
  background-color: transparent;
  caret-color: black;
  border: none;
  outline: none;
  height: 30px;
  margin-left: 115px;
  width: 200px;
  z-index: 12;
}

.inputScan {
  ime-mode: disabled;
}

.active {
  display: none;
}
</style>
